/**
 * 滑动控件
 * @author 李必富
 */
class Slide {

    parent;                                             //父组件元素
    templateItem;                                       //模板布局项目
    keys;                                               //数据条目列表
    values;                                             //数据列表
    slideFun;                                           //滑动后的回调事件
    useValuesFun;                                       //布局填值的方法

    /**
     * 内部容器
     */
    location_item_frame;
    /**
     * 子元素数组
     */
    templateItems;

    /**
     * 标记手指是否抬起
     */
    isUp;
    /**
     * 延迟任务的索引
     * @type {number}
     */
    delayTak=-1;

    /**
     * 构造一个滑动组件
     * @param parent
     * @param templateItem
     * @param keys
     * @param slideFun
     * @param useValuesFun
     */
    constructor(parent, templateItem, keys, slideFun,useValuesFun) {
        this.parent = parent;
        this.useValuesFun=useValuesFun;
        this.location_item_frame=document.createElement("DIV");
        this.location_item_frame.style.height="100%";
        this.parent.appendChild(this.location_item_frame);
        this.templateItem = templateItem;
        templateItem.style.display="inline-block";
        templateItem.style.float="left";
        templateItem.style.height="100%";
        templateItem.style.border="0";
        templateItem.style.textAlign="center";
        this.setValues(this.values);
        this.keys = keys;
        this.slideFun = slideFun;
    }

    /**
     * 更新组件中的数据
     * @param values    数据数组
     */
    setValues=(values)=>{
        this.parent.removeEventListener("scroll",this.scroll);
        this.parent.removeEventListener("touchstart",this.touchstart);
        this.parent.removeEventListener("touchend",this.touchend);
        this.location_item_frame.innerHTML="";
        let isArray=Array.isArray(values);
        if (isArray){
            this.values=values;
            let valuesNum=(this.values===undefined?0:this.values.length);
            this.location_item_frame.style.width=(valuesNum*100)+"%";
            for (let i = 0; i < valuesNum; i++) {
                let temp=this.templateItem.cloneNode(true);
                temp.style.width=100/valuesNum+"%";
                this.useValuesFun(temp,this.values[i],i);
                this.location_item_frame.appendChild(temp);
            }
            if (valuesNum!==0){
                this.parent.addEventListener("scroll",this.scroll);
                this.parent.addEventListener("touchstart",this.touchstart);
                this.parent.addEventListener("touchend",this.touchend);
            }
        }else {
            this.location_item_frame.style.width="100%";
        }
    };

    /**
     * 延迟调整图片
     */
    newTask=()=>{
        this.delayTak=setTimeout(()=> {
            let scroll_num=this.parent.scrollLeft/this.parent.clientWidth;                                                                    /*当前移动的距离，以item宽度为单位*/
            scroll_num=Math.round(scroll_num);                                                                                          /*当前移动的距离，以item宽度为单位，取整*/
            if (this.slideFun){
                this.slideFun(scroll_num);
            }
            let scrollLeft=scroll_num*this.parent.clientWidth;                                                                                       /*准备滚动的横向距离*/
            this.parent.scrollTo(scrollLeft,this.parent.scrollTop);
        },20);
    };

    /**
     * 新建延迟任务
     */
    checkTask=()=>{
        clearTimeout(this.delayTak);
        if (this.isUp){
            this.newTask();
        }
    };

    /**
     * 滚动时新建任务
     */
    scroll = () => {
        this.checkTask();
    };

    /**
     * 标记手指是否移开
     */
    touchstart=()=>{
        this.isUp=false;
    };

    /**
     * 标记手指是否移开，检测任务
     */
    touchend=()=>{
        this.isUp=true;
        this.checkTask();
    }
}